@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom font family and layout */
@layer base {
  body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  /* 确保html和body占满全屏 */
  html, body {
    height: 100%;
    overflow: hidden;
  }

  /* 根容器高度 */
  #app {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* 布局高度计算 */
  .layout-container {
    height: 100vh;
    display: flex;
    overflow: hidden;
  }

  .layout-sidebar {
    flex-shrink: 0;
    height: 100vh;
  }

  .layout-main {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .layout-header {
    height: 64px; /* 固定header高度 */
    flex-shrink: 0;
  }

  .layout-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  .layout-footer {
    height: 48px; /* 固定footer高度 */
    flex-shrink: 0;
  }

  /* 聊天页面特定样式 */
  .chat-messages-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;
  }
}

/* Dark theme styles */
@layer base {
  .dark {
    color-scheme: dark;
  }

  /* Dark theme scrollbar */
  .dark ::-webkit-scrollbar {
    width: 8px;
  }

  .dark ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
  }

  /* Light theme scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }

  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

/* Custom animations */
@layer utilities {
  .text-gradient {
    background: linear-gradient(90deg, #00bfff 0%, #00ff88 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .text-gradient-light {
    background: linear-gradient(90deg, #0ea5e9 0%, #10b981 50%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .bg-grid {
    background-image: 
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
  }

  .bg-grid-light {
    background-image: 
      linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
  }
  
  .glow-effect {
    box-shadow: 
      0 0 20px rgba(0, 191, 255, 0.3),
      0 0 40px rgba(0, 191, 255, 0.1),
      inset 0 0 20px rgba(0, 191, 255, 0.1);
  }

  .glow-effect-light {
    box-shadow: 
      0 0 20px rgba(14, 165, 233, 0.2),
      0 0 40px rgba(14, 165, 233, 0.05),
      inset 0 0 20px rgba(14, 165, 233, 0.05);
  }

  .glass-effect {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .glass-dark {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.1);
  }

  .glass-light {
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
  }

  /* Chat message styles */
  .message-user {
    @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white;
  }

  .message-assistant {
    @apply bg-gray-100 text-gray-900 dark:bg-dark-800 dark:text-gray-100;
  }

  .message-system {
    @apply text-secondary-900 dark:text-secondary-300;
    background-color: var(--color-accent, #10b981);
    opacity: 0.1;
  }
  
  .dark .message-system {
    background-color: var(--color-accent, #10b981);
    opacity: 0.2;
  }

  /* Button variants */
  .btn-primary {
    background: linear-gradient(to right, var(--color-primary, #0ea5e9), var(--color-primary, #0ea5e9));
    @apply text-white font-medium px-4 py-2 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl;
  }
  
  .btn-primary:hover {
    filter: brightness(1.1);
  }

  .btn-secondary {
    background-color: var(--color-accent, #10b981);
    @apply text-white font-medium px-4 py-2 rounded-lg transition-all duration-200;
  }
  
  .btn-secondary:hover {
    filter: brightness(1.1);
  }

  .btn-ghost {
    @apply bg-transparent hover:bg-gray-100 dark:hover:bg-dark-800 text-gray-700 dark:text-gray-300 font-medium px-4 py-2 rounded-lg transition-all duration-200;
  }

  .btn-outline {
    @apply border border-gray-300 dark:border-dark-600 hover:border-primary-500 dark:hover:border-primary-400 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium px-4 py-2 rounded-lg transition-all duration-200;
  }

  /* Input styles */
  .input-primary {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-dark-600 bg-white dark:bg-dark-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
  }

  /* ChatGPT style input container */
  .chatgpt-input-container {
    @apply relative flex items-end bg-white dark:bg-gray-800 transition-all duration-200;
    border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    max-width: 768px;
    margin: 0 auto;
  }

  .dark .chatgpt-input-container {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  }

  .chatgpt-input-container:focus-within {
    box-shadow: 0 0 0 2px var(--color-primary, #0ea5e9);
  }

  /* ChatGPT input textarea */
  .chatgpt-input-textarea {
    @apply flex-1 px-4 py-3 bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 resize-none border-0 focus:ring-0 focus:outline-none transition-all duration-200;
    min-height: 48px;
    max-height: 200px;
    line-height: 1.5;
    font-size: 16px;
  }

  /* ChatGPT send button */
  .btn-chatgpt-send {
    @apply flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 disabled:cursor-not-allowed;
    background: var(--color-primary, #0ea5e9);
    color: white;
    margin: 4px;
  }

  .btn-chatgpt-send:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: scale(1.05);
  }

  .btn-chatgpt-send:disabled {
    background: #d1d5db;
    opacity: 0.4;
  }

  .dark .btn-chatgpt-send:disabled {
    background: #4b5563;
    opacity: 0.4;
  }

  /* ChatGPT input area background */
  .chatgpt-input-area {
    @apply bg-white dark:bg-gray-900;
    background: linear-gradient(180deg, 
      rgba(255, 255, 255, 0) 0%, 
      rgba(255, 255, 255, 0.8) 20%, 
      rgba(255, 255, 255, 1) 100%
    );
  }

  .dark .chatgpt-input-area {
    background: linear-gradient(180deg, 
      rgba(17, 24, 39, 0) 0%, 
      rgba(17, 24, 39, 0.8) 20%, 
      rgba(17, 24, 39, 1) 100%
    );
  }

  /* Clear button style */
  .btn-clear-input {
    @apply p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200;
  }

  /* Input hint text */
  .input-hint {
    @apply text-xs text-gray-500 dark:text-gray-400 text-center mt-2;
  }

  /* Card styles */
  .card {
    @apply bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-700;
  }
  
  /* Card with padding for regular content */
  .card-padded {
    @apply bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-700 p-6;
  }

  .card-hover {
    @apply hover:shadow-xl hover:scale-105 transition-all duration-300;
  }

  /* Loading spinner */
  .loading-spinner {
    animation: spin 1s linear infinite;
  }

  /* Typing indicator */
  .typing-dots {
    display: inline-block;
  }

  .typing-dots::after {
    content: '';
    animation: typingDots 1.5s infinite;
  }

  @keyframes typingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
  }

  /* Status indicators */
  .status-online {
    @apply bg-secondary-500;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  }

  .status-offline {
    @apply bg-gray-400;
  }

  .status-busy {
    @apply bg-yellow-500;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom focus styles */
@layer base {
  * {
    @apply focus:outline-none;
  }
}

  /* Animation delays for staggered effects */
@layer utilities {
  .animate-delay-100 {
    animation-delay: 100ms;
  }
  .animate-delay-200 {
    animation-delay: 200ms;
  }
  .animate-delay-300 {
    animation-delay: 300ms;
  }
  .animate-delay-500 {
    animation-delay: 500ms;
  }
  
  /* 动态主题样式 */
  .theme-primary {
    color: var(--color-primary, #0ea5e9) !important;
  }
  
  .theme-primary-bg {
    background-color: var(--color-primary, #0ea5e9) !important;
  }
  
  .theme-accent {
    color: var(--color-accent, #10b981) !important;
  }
  
  .theme-accent-bg {
    background-color: var(--color-accent, #10b981) !important;
  }
}

/* Markdown content styles */
.markdown-content {
  @apply text-gray-800 dark:text-gray-200 leading-relaxed;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  @apply font-semibold text-gray-900 dark:text-gray-100 mb-4 mt-6;
}

.markdown-content h1 { @apply text-2xl; }
.markdown-content h2 { @apply text-xl; }
.markdown-content h3 { @apply text-lg; }

.markdown-content p {
  @apply mb-4;
}

.markdown-content ul,
.markdown-content ol {
  @apply mb-4 ml-6;
}

.markdown-content li {
  @apply mb-2;
}

.markdown-content code {
  @apply bg-gray-100 dark:bg-dark-800 text-primary-600 dark:text-primary-400 px-2 py-1 rounded text-sm font-mono;
}

.markdown-content pre {
  @apply bg-gray-100 dark:bg-dark-800 p-4 rounded-lg overflow-x-auto mb-4;
}

.markdown-content pre code {
  @apply bg-transparent text-gray-800 dark:text-gray-200 p-0;
}

.markdown-content blockquote {
  @apply border-l-4 border-primary-500 pl-4 italic text-gray-600 dark:text-gray-400 mb-4;
}

.markdown-content table {
  @apply w-full border-collapse mb-4;
}

.markdown-content th,
.markdown-content td {
  @apply border border-gray-300 dark:border-dark-600 px-4 py-2 text-left;
}

.markdown-content th {
  @apply bg-gray-100 dark:bg-dark-800 font-semibold;
}
